<template>
  <main class="c-card" :style="separateStyle">
    <div class="title" v-if="title">
      <div class="left">
        <div class="text">{{ title }}</div>
        <slot name="title-left"></slot>
      </div>
      <div class="right">
        <slot name="title-right"></slot>
        <div class="more" v-if="clickMore" @click="clickMoreHandler">详情></div>
      </div>
    </div>
    <div class="content">
      <slot/>
    </div>
  </main>
</template>

<script lang="js">
import {pxToVw} from "@/utils/transform.js"

export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    clickMore: {
      default: false
    },
    separate: {
      type: Boolean,
      default: true
    },
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  computed: {
    separateStyle() {
      const style = {}
      if (this.height) style['height'] = pxToVw(this.height)
      if (this.separate) style['marginBottom'] = pxToVw(20);
      return style;
    }
  },
  methods: {
    clickMoreHandler() {
      if (this.clickMore) {
        this.clickMore();
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.c-card {
  padding 20px
  background: #FFFFFF;
  box-shadow: 0 4px 8px 0 rgba(14, 27, 110, 0.15), 0 2px 4px 0 rgba(14, 24, 101, 0.20);
  border-radius: 16px;
  display flex
  flex-direction column

  .title {
    flex-shrink 0
    padding-bottom 20px
    display flex
    align-items center
    justify-content space-between

    .left, .right {
      display flex
      align-items center
    }

    .text {
      font-weight bold
      font-size: 14px;
      color: #4B82FB;
    }

    .more {
      font-size: 12px;
    }
  }

  .content {
    flex-grow 1
    .no-data{
      font-size 14px
    }
  }
}
</style>
